<template>
  <div>
    <common-head></common-head>
    <div class="container">
       <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for = 'banner in details.pics'
          :key = 'banner.id'
        >
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <div v-if = 'details.basicInfo'>
        <h4> {{ details.basicInfo.name }} </h4>
        <p>
          <span class="minprice">{{ details.basicInfo.minPrice | currency }}</span>
          <span class="originalprice">{{ details.basicInfo.originalPrice | currency }}</span>
        </p>
      </div>
      <!-- 其他 -->
      <div class="desc">
        <div class="desc-c">
          <van-cell title="材料" :label="item.characteristic" size="large" />
          <van-cell title="包装" :label="item.tags" size="large"/>
        </div>
      </div>
      <!-- /其他 -->
      <!-- 富文本 -->
      <div class="rich-text" v-html = 'content'></div>
      <!-- /富文本 -->
      <!-- 底部 -->
      <van-goods-action>
        <van-goods-action-icon icon="home-o" text="首页" @click="goHome"/>
        <van-goods-action-icon icon="phone-o" text="电话" />
        <van-goods-action-icon icon="shopping-cart-o" text="购物车" @click="goCart" :badge="items.length?items.length:''"/>
        <van-goods-action-button type="warning" text="加入购物车" @click="clickAction(0)"/>
        <van-goods-action-button type="danger" text="立即购买" @click="clickAction(1)" />
      </van-goods-action>
      <!-- /底部 -->
      <!-- 弹出层 -->
      <van-popup v-model="show"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '42%' }"
      >
      <!-- 卡片 -->
        <van-card
          :price="item.minPrice"
          :desc="item.characteristic"
          :title="item.name"
          :thumb="item.pic"
        >
          <template #tags>
            <van-tag plain type="danger"
            v-for = '(tags,index) in splTags'
            :key='index'>
            {{ tags }}</van-tag>
          </template>
        </van-card>
        <div class="step">
        <span>购买数量</span><van-stepper input-width="40px" button-size="32px" theme="round" v-model="item.num"/>
      </div>
        <!-- /卡片 -->
        <van-button size="large" type="danger" block @click="addToCart">确定</van-button>
      </van-popup>
      <!-- /弹出层 -->
    </div>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { getItem } from '@api'
import { currency } from '@filters'
import { mapState, mapMutations } from 'vuex'
import { Toast } from 'vant'
export default {
  data () {
    return {
      details: {
        content: ''
      },
      show: false,
      action: 0, // 0代表购物车 1代表立即购买
      item: {
        num: 1,
        tags: ''
      }
    }
  },
  created () {
    this.fetchItem()
  },
  methods: {
    // 去主页
    goHome () {
      this.$router.push('/home')
    },
    // 去购物车页
    goCart () {
      this.$router.push('/cart')
    },
    // 加入购物车
    addToCart () {
      if (!this.action) {
        // 查询购物车数据中有没有该商品
        console.log(this.items)
        const isExist = this.items.find(el => el.id === this.item.id)
        if (!isExist) {
          this.item.isChecked = true
          this.addCart(this.item)
          Toast.success('添加购物车成功')
        } else {
          Toast.fail('购物车已存在该商品，请勿重复添加')
        }
      }
      this.show = false
    },
    // 弹出弹出层
    clickAction (action) {
      this.show = true
      this.action = action
    },
    fetchItem () {
      getItem(this.$route.query.id).then(res => {
        // console.log(res)
        if (res.data.code === 0) {
          this.details = res.data.data
          this.item = {
            ...this.item,
            ...res.data.data.basicInfo
          }
        }
      })
    },
    ...mapMutations('cart', ['addCart'])
  },
  filters: {
    currency
  },
  computed: {
    content () {
      return this.details.content.replace(/<img/g, '<img style="vertical-align:top;width:100%"')
    },
    splTags () {
      return this.item.tags.split(',')
    },
    ...mapState({
      items: (state) => state.cart.carts.items
    })
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.van-swipe-item{
  img{
    width: 100%;
  }
}
h4{
  padding-left: 10px;
  font-size: 16px;
  color: #666;
}
p{
  padding-left: 10px;
  .minprice{
    color: #ff734c;
    font-size: 20px;
  }
  .originalprice{
    text-decoration: line-through;
    color: #999;
    margin-left: 8px;
  }
}
.step{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  span{
    display: inline-block;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    padding-left: 10px;
    box-sizing: border-box;
    margin-top: 5px;
  }
  .van-stepper{
    height: 20px;
  }
}
.van-card{
  padding: 50px 15px 10px;
  .van-card__title{
    font-size: 16px;
    font-weight: 700;
  }
}
.van-button{
  margin-top: 10px;
  border-radius: 5px;
}
.van-tag{
  margin: 5px;
}
.desc{
  background: #eee;
  .desc-c{
    padding: 5px 0;
    .van-cell__label{
      padding-top:5px;
      color: #333;
    }
  }
}
</style>
